<template>
    <div>
        <pagetitle></pagetitle>
        <el-card>
            <el-form :model="pageData" class="formbox" label-width="140px" :disabled="formDisabled" label-position="right">
                <div class="formboxitem">
                    <div class="title">供应商信息</div>
                    <!-- <el-form-item label="供应商名称：">
                        <el-input v-model="pageData.supplierName" class="inputs" placeholder="请输入供应商名称"></el-input>
                        <span class="formTip">*供应商名称</span>
                    </el-form-item> -->
                    <el-form-item label="客户名称：">
                        <!-- <el-input v-model="pageData.customerName" class="inputs" placeholder="请输入客户名称"></el-input> -->
                        <el-select v-model="pageData.teamId" filterable remote reserve-keyword placeholder="请输入客户名称搜索" remote-show-suffix :remote-method="remoteMethod" :loading="loading" class="inputs" @change="selectChange">
                            <el-option v-for="(item, index) in teamList" :key="index" :label="item.teamName" :value="item.teamId" />
                        </el-select>
                        <span class="formTip">*客户名称</span>
                    </el-form-item>
                    <el-form-item label="供应商电话：">
                        <el-input v-model="pageData.supplierPhone" disabled class="inputs" placeholder="请输入供应商电话"></el-input>
                        <span class="formTip">*供应商电话</span>
                    </el-form-item>
                    <el-form-item label="产业分类：">
                        <div class="inputs">
                            <div v-for="(tag, index) in pageData.industrialClassificationList" :key="index">
                                <el-tag>
                                    {{ tag.industrialName }}
                                </el-tag>
                            </div>
                        </div>
                        <span class="formTip">*参考标准： GB/T 4754-2017 国民经济行业分类</span>
                    </el-form-item>
                    <!-- <el-form-item label="">
                        <div>
                            <div v-for="(tag, index) in industrialClassificationIdsTexts" :key="index">
                                <el-tag closable @close="handleClose(index)">
                                    {{ tag }}
                                </el-tag>
                            </div>
                        </div>
                    </el-form-item> -->
                    <!-- <el-form-item label="产业分类说明：">
                        <el-input v-model="pageData.illustrate" :rows="6" resize="none" disabled type="textarea" placeholder=""></el-input>
                    </el-form-item> -->
                </div>
                <div class="formboxitem">
                    <div class="title">GIS信息</div>
                    <el-form-item label="客户地址：">
                        <addRess class="inputs" :value="pageData.supplierAddressArea.keyText" disabled :key="pageData.supplierAddressArea" placeholder="请选择客户地址"></addRess>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="pageData.supplierAddress" disabled class="inputs" placeholder="请输入详细地址"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label=""> -->

                    <mars3d
                        ref="mars3ds"
                        class="mars3ds"
                        :teamName="pageData.supplierName"
                        v-if="pageData.mapKey"
                        :addr="`${pageData.supplierAddressArea.valueText}/${pageData.detailedAddress ? pageData.detailedAddress : ''}`"
                        :lng="pageData.longitude"
                        :lat="pageData.latitude"
                    ></mars3d>
                    <!-- </el-form-item> -->
                    <!-- <mars3d class="mars3ds"></mars3d> -->
                </div>
                <div class="formboxitem" v-if="!pageType.type">
                    <!-- <el-button class="submitbtn" text bg @click="onSubmit">添加供应商</el-button> -->
                    <sxnfbtn @click="onSubmit">添加供应商</sxnfbtn>
                </div>
            </el-form>
            <div class="formboxitem" v-if="pageType.type">
                <sxnfbtn class="submitbtn" v-if="pageType.type == '1'" @click="router.back()">返回</sxnfbtn>
                <sxnfbtn class="submitbtn" v-if="pageType.type == '2'" @click="onSubmitPut">修改供应商</sxnfbtn>
                <!-- <el-button class="submitbtn" v-if="pageType.type == '1'" text bg @click="router.back()">返回</el-button> -->
                <!-- <el-button class="submitbtn" v-if="pageType.type == '2'" text bg @click="onSubmitPut">修改供应商</el-button> -->
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
// import mars3d from "@/components/mars3d.vue";
import { ref, reactive, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import mars3d from "@/components/mars3d.vue";
import type { CascaderProps } from "element-plus";
import { industrialClassifications, setSupplier, getSupplierMsg, industrialClassificationsOne, putSupplier, getElseTeam } from "@/api/team";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
const route = useRoute();
const teamList: any = ref([]);
const loading = ref(false);
// const cardType = ref(["法人", "授权管理员"]);
const pageData: any = reactive({
    supplierName: "",
    supplierPhone: "",
    supplierAddressArea: "",
    supplierAddress: "",
    ownerTeamId: "",
    teamId: "",
    industrialClassificationIds: [],
    industrialClassificationList: [],
    curentTeamId: store.getters.mainTeamId,
    supplierId: "",
    mapKey: "",
    latitude: "",
    longitude: "",
});
const remoteMethod = (query: string) => {
    if (query) {
        loading.value = true;
        getElseTeam({
            teamName: query,
        }).then((res) => {
            teamList.value = res.data;
            // console.log(teamList.value, pageData);
            setTimeout(() => {
                loading.value = false;
            }, 200);
        });
    }
};
const selectChange = () => {
    teamList.value.forEach((v: any) => {
        if (v.teamId == pageData.teamId) {
            pageData.supplierName = v.teamName;
            pageData.supplierPhone = v.legalPersonPhone;
            if (v.address && typeof v.address == "string") {
                pageData.supplierAddressArea = JSON.parse(v.address);
            }
            if (!v.address) {
                pageData.supplierAddressArea = {
                    keyText: "",
                };
            }

            pageData.latitude = v.applicantLat;
            pageData.longitude = v.applicantLon;
            pageData.mapKey = new Date().getTime();
            console.log(pageData, "321");
            pageData.supplierAddress = v.detailedAddress ? v.detailedAddress : "";
            pageData.industrialClassificationList = v.industrialClassificationList;
            pageData.industrialClassificationIds = [];
            if (v.industrialClassificationList && v.industrialClassificationList.length > 0) {
                v.industrialClassificationList.forEach((c: any) => {
                    pageData.industrialClassificationIds.push(c.industrialId);
                });
            }
        }
    });
};
const onSubmit = () => {
    pageData.supplierAddressArea = JSON.stringify(pageData.supplierAddressArea);
    setSupplier(pageData).then((res: any) => {
        ElMessage.success("添加成功");
        router.back();
    });
};
const onSubmitPut = () => {
    pageData.supplierAddressArea = JSON.stringify(pageData.supplierAddressArea);
    putSupplier(pageData).then((res: any) => {
        ElMessage.success("修改成功");
        router.back();
    });
};
const pageType: any = route.query;
const formDisabled = ref(false);
const getClientMsgs = () => {
    getSupplierMsg(pageType.id).then((res: any) => {
        let data = res.data;
        console.log(data, "321");
        nextTick(() => {
            pageData.supplierName = data.supplierName;
            remoteMethod(data.supplierName);
            pageData.supplierPhone = data.supplierPhone;
            pageData.teamId = data.teamId;
            pageData.supplierId = data.supplierId;
            if (data.supplierAddressArea && typeof data.supplierAddressArea == "string") {
                pageData.supplierAddressArea = JSON.parse(data.supplierAddressArea);
            }
            if (!data.supplierAddressArea) {
                pageData.supplierAddressArea = {
                    keyText: "",
                };
            }

            pageData.latitude = data.latitude;
            pageData.longitude = data.longitude;
            pageData.mapKey = new Date().getTime();
            pageData.supplierAddress = data.supplierAddress ? data.supplierAddress : "";
            pageData.industrialClassificationList = data.industrialClassificationList;
            pageData.industrialClassificationIds = [];
            if (data.industrialClassificationList && data.industrialClassificationList.length > 0) {
                data.industrialClassificationList.forEach((c: any) => {
                    pageData.industrialClassificationIds.push(c.industrialId);
                });
            }
        });
    });
};
// console.log(route);
// 页面类型
if (pageType.type == "1") {
    // 从我的团队页面进入
    formDisabled.value = true;
    route.meta.title = "查看供应商";
    getClientMsgs();
} else if (pageType.type == "2") {
    // 从加入团队页面搜索进入
    formDisabled.value = false;
    route.meta.title = "修改供应商";
    getClientMsgs();
}
</script>

<style scoped>
.mars3ds {
    height: 600px !important;
}
</style>
